<template>
  <view class="p-2">
    <!-- 头像昵称 关注按钮 -->
    <view class="flex align-center justify-between">
      <!-- 左边区域 -->
      <view class="flex align-center">
        <!-- 头像 -->
        <image
          :src="item.userpic"
          class="rounded-circle"
          mode="widthFix"
          style="width: 65rpx; height: 65rpx; margin-right: 20rpx"
          lazy-load
          @click="openSpace"
        ></image>
        <!-- 昵称发布时间 -->
        <view>
          <view class="font" style="line-height: 1.1"
            >{{ item.username }}
          </view>
          <text class="font-sm text-light-muted">{{ item.newstime }}</text>
        </view>
      </view>
      <!-- 右边区域 v-if="isFollow"false未关注-->
      <view
        @click="follow"
        v-if="!item.isFollow"
        class="flex align-center text-white rounded justify-center bg-main animate__animated animate__faster"
        hover-class="animate__rubberBand"
        style="width: 90rpx; height: 50rpx"
      >
        关注
      </view>
    </view>
    <!-- 标题 -->
    <view class="font-md my-1" @click="openDetail">
      {{ item.title }}
    </view>
    <!-- 图片 设置图片高度不加mode="widthFix"没有高度会闪一下-->
    <image
      v-if="item.titlepic"
      :src="item.titlepic"
      @click="openDetail"
      class="rounded w-100"
      style="height: 350rpx"
      mode="widthFix"
    ></image>
    <!-- 图标按钮 -->
    <view class="flex align-center">
      <view
        class="flex justify-center align-center animate__animated flex-1"
        hover-class="animate__rubberBand text-main"
        @click="doSupport('support')"
        :class="item.support.type === 'support' ? 'text-main' : ''"
      >
        <text class="iconfont icondianzan mr-2"></text>
        <text>{{
          item.support.support_count > 0 ? item.support.support_count : "支持"
        }}</text>
      </view>
      <view
        class="flex align-center justify-center flex-1 animate__animated"
        @click="doSupport('unsupport')"
        hover-class="animate__rubberBand text-main"
        :class="item.support.type === 'unsupport' ? 'text-main' : ''"
      >
        <text class="iconfont iconcaishixin- mr-2"></text>
        <text>{{
          item.support.unsupport_count > 0
            ? item.support.unsupport_count
            : "反对"
        }}</text>
      </view>
      <view
        class="flex align-center justify-center flex-1 animate__animated"
        hover-class="animate__rubberBand text-main"
        @click="openDetail"
      >
        <text class="iconfont iconpinglun1 mr-2"></text>
        <text>{{ item.comment_count > 0 ? item.comment_count : "评论" }}</text>
      </view>
      <view
        class="flex align-center justify-center flex-1 animate__animated"
        hover-class="animate__rubberBand text-main"
        @click="openDetail"
      >
        <text class="iconfont iconfenxiang1 mr-2"></text>
        <text>{{ item.share_num > 0 ? item.share_num : "分享" }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: Object,
    index: Number,
  },
  // props: {
  //   item: {
  //     type: Object,
  //     default() {
  //       return {};
  //     },
  //   },
  //   index: {
  //     type: Number,
  //     default: "",
  //   },
  // },
  data() {
    return {};
  },
  methods: {
    openSpace() {
      // 点击头像进去个人空间
      console.log("打开个人空间");
    },
    follow() {
      // 关注
      // 点击关注的需要把isFollow改为true 子组件不可以修改父组件的状态
      this.$emit("follow", this.index);
    },
    openDetail() {
      // 点击标题和图片进入详情,点击评论和分享都是进入详情页
      console.log("进入详情");
    },
    doSupport(type) {
      // 点赞和取消点赞
      console.log(type);
      this.$emit("doSupport", { index: this.index, type, type: type });
    },
  },
};
</script>

<style>
</style>
